<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>账号管理</BreadcrumbItem>
      <BreadcrumbItem>账号列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        <Input type="text" v-model="request.username" clearable placeholder="请输入账号"/>
      </FormItem>
      <FormItem>
        <Input type="text" v-model="request.email" clearable placeholder="请输入邮箱"/>
      </FormItem>
      <FormItem>
        <Select clearable v-model="request.role_id" placeholder="请选择角色" style="width: 120px;">
          <Option :value="item.id" v-for="(item,index) in data1" :key="index">{{ item.title }}</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
        <Button type="primary" v-hasPermission="['38']" @click="$router.push('/user/add')" style="margin-right: 10px">
          添加账号
        </Button>
        <Button v-if="showDel" v-hasPermission="['10']" style="margin-right: 10px" @click="alldel">批量删除</Button>
      </FormItem>
    </Form>
    <div>
      <Table :columns="columns1" :data="tableData" @on-selection-change="selectChange" :height="height"
             :loading="loading">
        <template slot-scope="{ row }" slot="status">
          <span class="success" v-if="row.status==='1'">启用中</span>
          <span class="error" v-if="row.status==='2'">已被禁用</span>
        </template>
        <template slot-scope="{ row }" slot="user_count">
          <a href="javascript:void(0)" @click="viewSub(row)">{{ row.user_count }}</a>
        </template>
        <!-- 机器组 -->
        <template slot-scope="{ row }" slot="group_count">
          <router-link :to="'/team/index?manager_id='+row.id" v-if="row.group_count!==0"><span
            style="color: #2db7f5;">{{ row.group_count }}</span></router-link>
          <span v-else>{{ row.group_count }}</span>
        </template>
        <template slot-scope="{ row }" slot="user_device_count">
          <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!==0"><span
            style="color: #2db7f5;">{{ row.user_device_count }}</span></router-link>
          <span v-else>{{ row.user_device_count }}</span>
        </template>
        <!-- 机器 -->
        <template slot-scope="{ row }" slot="device_count">
          <router-link :to="'/equipment/index?manager_id='+row.id" v-if="row.device_count!==0"><span
            style="color: #2db7f5;">{{ row.device_count }}</span></router-link>
          <span v-else>{{ row.device_count }}</span>
        </template>
        <template slot-scope="{ row }" slot="option">
          <Button type="primary" v-hasPermission="['38']" size="small" style="margin-right: 5px" @click="edit(row)">编辑
          </Button>
          <Button type="error" v-hasPermission="['38']" size="small" style="margin-right: 5px" @click="remove(row)">删除
          </Button>
          <Button class="button" size="small" v-hasPermission="['38']" style="margin-right: 5px"
                  :type="row.status === 2?'success':'error' " @click="setStatus(row)">
            <span v-if="row.status === 1">禁用</span>
            <span v-else>启用</span>
          </Button>
        </template>
      </Table>
    </div>
    <div style="display: flex;justify-content: center;margin-top: 24px;">
      <Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
            show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>
    </div>

    <Modal v-model="modal1" :title="form.id ? '编辑账号' : '添加账号'" :loading="modalLoading" :mask-closable="false"
           @on-ok="confirm" @on-cancel="cancel">
      <Form :model="form" :label-width="110">
        <FormItem label="密码">
          <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem label="当前角色" v-hasPermission="['38']">
          <Select clearable v-model="form.role_id" placeholder="请选择" style="width: 120px;">
            <Option v-for="(item, index) in data1" :value="item.id" :key="index">{{ item.title }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modal3" title="设置角色" @on-ok="confirm2" @on-cancel="cancel2" :mask-closable="false">
      <Form :label-width="110">
        <FormItem label="当前角色">
          <Select v-model="user.role_id" placeholder="请选择" style="width: 120px;">
            <Option :value="item.id" v-for="(item, index) in data1" :key="index">{{ item.title }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: this.$store.state.width,
      height: this.$store.state.height,
      showDel: false, //批量删除
      loading: false,
      request: {
        username: '',
        page: 1,
        loading: false
      },
      codeImg: '',
      modal2: false,
      modal3: false,
      columns1: [
        {
          title: "角色",
          key: "title",
          minWidth: 100,
          align: "center"
        },
        {
          title: "email",
          key: "email",
          minWidth: 250,
          align: "center"
        },
        {
          title: "账号",
          key: "username",
          minWidth: 150,
          align: "center"
        },
        {
          title: "机器组数量",
          slot: "group_count",
          minWidth: 150,
          align: "center"
        },
        {
          title: "操作员数量",
          slot: "user_device_count",
          minWidth: 150,
          align: "center"
        },
        {
          title: "机器数量",
          slot: "device_count",
          width: "150",
          align: "center"
        },
        {
          title: "状态",
          slot: "status",
          width: "150",
          align: "center"
        },
        {
          title: "创建时间",
          key: "create_time",
          width: "200",
          align: "center"
        },
        {
          title: "操作",
          slot: "option",
          minWidth: 300,
          align: "center",
          fixed: 'right',
        }
      ],
      tableData: [],
      page: {},
      modalLoading: true,
      modal1: false,
      form: {
        id: null,
        // username: "",
        // email: ""
      },
      user: {
        id: '',
        role_id: ''
      },
      data1: [],
      selectID: [],
      content: '权限1;权限2;权限3;权限4;权限5;权限6;权限7;权限8'
    };
  },
  created() {
    this.lists();
    this.getUserlist();
  },
  methods: {
    alldel() {
      //批量删除
      this.$Modal.confirm({
        title: "确定要删除这些账号吗？",
        onOk: () => {
          // this.$Message.success("删除成功");
          this.axios.post("account/delAccount", {id: this.selectID}).then(res => {
            if (res.code === 1) {
              this.$Message.success("删除成功");
              this.lists();
            }
          })

        },
        onCancel: () => {
        }
      });


    },
    selectChange(selection) {
      console.log('选项发生改变', selection)
      this.selectID = [];
      selection.forEach(item => {
        this.selectID.push(item.id)
      })

      if (this.selectID.length > 0) {
        this.showDel = true
      } else {
        this.showDel = false
      }

      console.log(this.selectID)
    },

    edituser(row) {
      console.log(row)
      this.user.id = row.id;
      this.user.role_id = row.role_id;

      console.log(this.user)

      this.modal3 = true;
    },
    confirm2() {
      console.log(this.user)
      this.axios.post("account/setAccRole", this.user).then(res => {
        if (res.code === 1) {
          this.modal3 = false;
          this.$Message.success("保存成功！");
          this.lists();
          this.cancel2();
        }
      });
    },
    cancel2() {
      this.user = {
        id: '',
        role_id: ''
      }
    },
    getUserlist() { //所有角色
      this.axios.post("role/role_list", {status: 1}).then(res => {
        if (res.code === 1) {
          // this.loading = false;
          this.data1 = res.data.list;
          // this.page.count = res.data.count; // 总条数
          // this.page.curPage = res.data.curPage; // 当前页
          // this.page.countPage = res.data.countPage; // 总页数
        }
      });
    },

    viewSub(row) {
      console.log(row.id)
      this.$Message.success("id:", row.id);
      // this.$router.push('/master/index?account_id=' + row.id);
    },
    search() {
      this.request.page = 1;
      this.lists();
    },
    handleSizeChange(val) {
      this.request.page = 1;
      this.request.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.request.page = val;
      this.lists();
    },
    lists() {
      this.loading = true;
      // console.log( JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id )
      // this.request.id = JSON.parse(this.astgo.getItem(this.Pn + "info")).role_id;
      this.axios.post("account/accountList", this.request).then(res => {
        if (res.code === 1) {
          this.loading = false;
          this.tableData = res.data.list;
          this.page.count = res.data.count; // 总条数
          this.page.curPage = res.data.curPage; // 当前页
          this.page.countPage = res.data.countPage; // 总页数
        }
      });

    },
    edit(row) {
      this.form.id = row.id;
      this.form.role_id = row.role_id;
      this.form.username = row.username;
      // this.form.email = row.email;
      this.modal1 = true;
    },
    confirm() {
      this.axios.post("account/accEdit", this.form).then(res => {
        this.modalLoading = false;
        if (res.code === 1) {
          this.modal1 = false;
          this.$Message.success("保存成功！");
          this.lists();

          this.cancel();
        }
      })

    },
    remove(row) {

      this.selectID = [];
      this.selectID.push(row.id)

      this.$Modal.confirm({
        title: '确定要删除账号:“' + row.username + '”吗？',
        onOk: () => {

          this.axios.post("account/delAccount", {id: this.selectID}).then(res => {
            if (res.code === 1) {
              this.$Message.success("删除成功");
              this.lists();
            }
          })
        },
        onCancel: () => {
        }
      });
    },
    setStatus(row) {
      var text = "确定要" + (row.status === 2 ? "启用" : "禁用") + "账号:“" + row.username + "”吗？";
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.axios.post("account/accountStatus", {id: row.id, status: row.status === 1 ? 2 : 1}).then(res => {
            if (res.code === 1) {
              this.$Message.success("操作成功");
              this.lists();
            }
          })
        },
        onCancel: () => {
        }
      });
    },
    cancel() {
      this.form = {
        id: null,
        username: "",
        email: ""
      };
    }
  }
};
</script>

<style scoped>
.spec_item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.spec_item .input {
  width: 200px;
}

.spec_item button {
  margin-left: 10px;
}
</style>
